<script type="text/javascript">
var $j = jQuery.noConflict();
    $j(document).ready(function(){
        // Get original font size
        var originalFontSize = $j('html').css('font-size');

        // Get active column
        var activeColumn = $j(".activeColumn");

        // Set max width using percentage %
        var maxWidth = 10;

        // Get width % ratio for min width by getting the children (count) in the header
        var table_header_children = $j('tr:first-child').children().size();

        // Divide the column header count by 100 to get the average width
        var table_column_width_average = (100 / table_header_children);

        // Get the outer height of the header
        var table_header_height = $j('th').outerHeight();

        // Set min width for the columns
        var minWidth = table_column_width_average;

        // Animate table by clicking the table header ( <th> )
        $j("tr th").click(function(){
            if ($j(this).hasClass('correct_text_spacing')) {
                // Check for double click, do nothing
                var doubleClicked = true;
            }
            else {
                // Animates the last active column
                $j(activeColumn).animate({
                    width: minWidth + "%"
                }, {
                    queue: false,
                    duration: 600
                });

                // Animates the table header
                $j(this).animate({
                    width: maxWidth + "%"
                }, {
                    queue: false,
                    duration: 600
                });

                activeColumn = this;

                // Reset the table header CSS
                $j('tr:first-child').children().css({
                    'width': minWidth,
                    'overflow': 'hidden',
                    'white-space': 'nowrap',
                    'height': table_header_height
                });

                // Remove class if found
                $j('table.tbl tr').children().removeClass('correct_text_spacing');

                // Reset the font size to zero
                var index = $j(this).parent().children().index(this);
                $j('table.tbl tr').each(function(){
                    $j(':nth-child(' + (index + 1) + ')', this).css('font-size', '0px');
                });

                // Fix text spacing on selected column
                var index = $j(this).parent().children().index(this);
                $j('table.tbl tr').each(function(){
                    $j(':nth-child(' + (index + 1) + ')', this).addClass('correct_text_spacing').animate({
                        fontSize: originalFontSize
                    }, {
                        queue: true,
                        duration: 950
                    });
                });
            }
        });
    });
</script>

<table class="tbl">
    <tr>
        <th class="firstColumn">
            1:Heading
        </th>
        <th>
            2:Long Heading Data
        </th>
        <th>
            3:Heading
        </th>
        <th>
            4:Heading
        </th>
        <th>
            5:Heading
        </th>
        <th>
            6:Heading
        </th>
        <th>
            7:Heading
        </th>
        <th>
            8:Heading
        </th>
        <th>
            9:Heading
        </th>
        <th>
            10:Heading
        </th>
        <th>
            11:Heading
        </th>
        <th>
            12:Heading
        </th>
        <th>
            13:Heading
        </th>
        <th>
            14:Heading
        </th>
        <th>
            15:Heading
        </th>
        <th>
            16:Heading
        </th>
        <th>
            17:Heading
        </th>
        <th>
            18:Heading
        </th>
    </tr>
    <tr>
        <td>
            Cell 1:Row 1
        </td>
        <td>
            Cell 2:Row 1:Overflowing Data - This has a lot of extra data that will be hidden and displayed correctly. 
            Please add more data to test the functionality of the cell data
        </td>
        <td>
            Cell 3:Row 1
        </td>
        <td>
            Cell 4:Row 1
        </td>
        <td>
            Cell 5:Row 1: "Lorem ipsum dolor sit amet, 
            consectetur adipisicing elit, sed do eiusmod  
            tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris  
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
            in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
            Excepteur sint occaecat cupidatat non proident, 
            sunt in culpa qui officia deserunt mollit anim id est laborum."
        </td>
        <td>
            Cell 6:Row 1
        </td>
        <td>
            Cell 7:Row 1
        </td>
        <td>
            Cell 8:Row 1
        </td>
        <td>
            Cell 9:Row 1
        </td>
        <td>
            Cell 10:Row 1
        </td>
        <td>
            Cell 11:Row 1
        </td>
        <td>
            Cell 12:Row 1
        </td>
        <td>
            Cell 13:Row 1
        </td>
        <td>
            Cell 14:Row 1
        </td>
        <td>
            Cell 15:Row 1
        </td>
        <td>
            Cell 16:Row 1
        </td>
        <td>
            Cell 17:Row 1
        </td>
        <td>
            Cell 18:Row 1
        </td>
    </tr>
    <tr>
        <td>
            Cell 1:Row 2
        </td>
        <td>
            Cell 2:Row 2:Overflowing Data
        </td>
        <td>
            Cell 3:Row 2
        </td>
        <td>
            Cell 4:Row 2
        </td>
        <td>
            Cell 5:Row 2
        </td>
        <td>
            Cell 6:Row 2
        </td>
        <td>
            Cell 7:Row 2
        </td>
        <td>
            Cell 8:Row 2
        </td>
        <td>
            Cell 9:Row 2
        </td>
        <td>
            Cell 10:Row 2
        </td>
        <td>
            Cell 11:Row 2
        </td>
        <td>
            Cell 12:Row 2
        </td>
        <td>
            Cell 13:Row 2
        </td>
        <td>
            Cell 14:Row 2
        </td>
        <td>
            Cell 15:Row 2
        </td>
        <td>
            Cell 16:Row 2
        </td>
        <td>
            Cell 17:Row 2
        </td>
        <td>
            Cell 18:Row 2: "Lorem ipsum dolor sit amet, 
            consectetur adipisicing elit, sed do eiusmod  
            tempor incididunt ut labore et dolore magna aliqua. 
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris  
            nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
            in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  
            Excepteur sint occaecat cupidatat non proident, 
            sunt in culpa qui officia deserunt mollit anim id est laborum."
        </td>
    </tr>
</table>
